<template>
  <div id="index">
<!--    <dv-full-screen-container class="bg">-->
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div id="body1" >
        <header> <!--    头部div start-->
          <div id="header1">
            <span style="font-size: 22px">重庆果园港</span>
          </div>
          <div id="header2">
            <h1 style="font-size: 36px">船舶污染物接收数据展示</h1>
          </div>
          <div id="header3">
            <el-select v-model="select1"  @change="onSelected($event)" >
              <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
              </el-option>
            </el-select>
          </div>
        </header>  <!--    头部div start-->
        <div  style="display: flex"> <!--    身体部分div start-->
          <div id="leftdiv"><!--    身体部分div左 start-->
            <div class="no" style="margin-bottom: 20px;">
              <p>月转接数据</p>
              <centreLeft :selectProp="select2"></centreLeft>
            </div>
            <div class="no" style="margin-bottom: 20px;">
<!--              <p>智能设备储量</p>-->
<!--              <centreLeft1Chart :selectProp="select2"></centreLeft1Chart>-->
<!--              <p>接收比例</p>-->
<!--              <centreLeft2Chart :selectProp="select2"></centreLeft2Chart>-->
<!--              <div class="centredivtop">-->
                <p>含油污水</p>
                <div class="no-hd" style="margin-top: 0.5rem">
                  <ul>
                    <li>{{this.hycount}}</li>
                    <li>{{this.hySum}}</li>
                  </ul>
                </div>
                <div class="no-bd">
                  <ul>
                    <li>接收艘次（次）</li>
                    <li>接收总量（立方）</li>
                  </ul>
                </div>
<!--              </div>-->
            </div>
            <div class="no">
              <el-table
                      :height=302
                      :data="sewageList1"
                      border
                      style="width: 100%">
                <el-table-column
                        prop="shipNameCn"
                        label="船名"
                        min-width="20%">
                </el-table-column>
                <el-table-column
                        prop="time"
                        label="接收时间"
                        min-width="23%">
                </el-table-column>
                <el-table-column
                        prop="modeOfOperationName"
                        label="作业方式"
                        min-width="20%">
                </el-table-column>
                <el-table-column
                        prop="sewageTypeName"
                        label="类型"
                        min-width="17%">
                </el-table-column>
                <el-table-column
                        prop="num"
                        label="数量"
                        min-width="20%">
                </el-table-column>
              </el-table>

            </div>

          </div><!--    身体部分div左 end-->
          <div id="centrediv"><!--    身体部分div中 start-->
            <div class="centredivtop" @click="cblj()">
              <p>船舶垃圾</p>
              <div class="no-hd" style="margin-top: 0.5rem">
                <ul>
                  <li>{{this.cbcount}}</li>
                  <li>{{this.cbSum}}</li>
                </ul>
              </div>
              <div class="no-bd">
                <ul>
                  <li>接收艘次（次）</li>
                  <li>接收总量（公斤）</li>
                </ul>
              </div>

            </div>
            <div class="centredivtop" @click="shws()">
              <p>生活污水</p>
              <div class="no1-hd" style="margin-top: 0.5rem">
                <ul>
                  <li>{{this.shcount}}</li>
                  <li>{{this.shSum}}</li>
                </ul>
              </div>
              <div class="no1-bd">
                <ul>
                  <li>接收艘次（次）</li>
                  <li>接收总量（立方）</li>
                </ul>
              </div>
            </div>
            <div id="centre-div-bottom">
              <el-table
                      @row-click="rowClick($event)"
                      :height="Height"
                      :data="newsList"
                      border
                      style="width: 100%">
                <el-table-column
                        prop="shipNameCn"
                        label="船名"
                        min-width="20%">
                </el-table-column>
                <el-table-column
                        prop="time"
                        label="接收时间"
                        min-width="23%">
                </el-table-column>
                <el-table-column
                        prop="modeOfOperationName"
                        label="作业方式"
                        min-width="20%">
                </el-table-column>
                <el-table-column
                        prop="sewageTypeName"
                        label="类型"
                        min-width="17%">
                </el-table-column>
                <el-table-column
                        prop="num"
                        label="数量"
                        min-width="20%">
                </el-table-column>
<!--                <el-table-column-->
<!--                        prop="transportName"-->
<!--                        label="接收设备"-->
<!--                        min-width="16.6%">-->
<!--                </el-table-column>-->
              </el-table>
            </div>
          </div><!--    身体部分div中 end-->
          <div id="rightdiv"><!--    身体部分div右边 start-->
            <div class="no" style="margin-bottom: 20px;">
              <p>近3个月接收艘次</p>
              <centreRight2Chart1 :selectProp="select2"></centreRight2Chart1>

            </div>
            <div class="no" style="margin-bottom: 30px;">
              <p>近3个月接收量</p>
              <centreRight2Chart2 :selectProp="select2"></centreRight2Chart2>
            </div>
            <div class="no" style="display: flex">
              <div style="width:313px; height:100%;">
                <p>智能岸电</p>
                <el-row style="margin-top: 20px">
                  <el-col :span="12"><div class="grid-content bg-purple">
                    船舶名称:
                  </div></el-col>
                  <el-col :span="12"><div class="grid-content bg-purple1" >
                    {{shipNameCn}}
                  </div></el-col>
                </el-row>
                <el-row>
                  <el-col :span="12"><div class="grid-content bg-purple">
                      开始时间:
                  </div></el-col>
                  <el-col :span="12"><div class="grid-content bg-purple1" >
                    {{startTime}}
                  </div></el-col>
                </el-row>
                <el-row>
                  <el-col :span="12"><div class="grid-content bg-purple">
                      结束时间:
                  </div></el-col>
                  <el-col :span="12"><div class="grid-content bg-purple1">
                    {{endTime}}
                  </div></el-col>
                </el-row>
                <el-row>
                  <el-col :span="12"><div class="grid-content bg-purple">
                    电量总和:
                  </div></el-col>
                  <el-col :span="12"><div class="grid-content bg-purple1" >
                    {{powerSum}}
                  </div></el-col>
                </el-row>

              </div>
              <div style="width:185px; height:100%;">
                <centreRight2Chart3 :selectProp="select2"></centreRight2Chart3>
              </div>


            </div>
          </div><!--    身体部分div右边 end-->
        </div><!--    身体部分div end-->
      </div>

<!--    </dv-full-screen-container>-->
    <el-dialog
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose">
      <div class="el-dialog-div">
      <h3 style="margin-bottom: 5px;color: rgba(38,255,251,0.8)">船舶垃圾</h3>
      <el-table
              :data="rubbishList"
              border
              style="width: 100%">
        <el-table-column
                prop="shipNameCn"
                label="船名"
                min-width="20%">
        </el-table-column>
        <el-table-column
                prop="mmsi"
                label="MMSI"
                min-width="20%">
        </el-table-column>
        <el-table-column
                prop="time"
                label="接收时间"
                min-width="20%">
        </el-table-column>
        <el-table-column
                prop="num"
                label="数量"
                min-width="20%">
        </el-table-column>
        <el-table-column
                prop="modeOfOperationName"
                label="作业方式"
                min-width="20%">
        </el-table-column>
      </el-table>
      </div>
    </el-dialog>

    <el-dialog
            :visible.sync="dialogVisible1"
            width="50%"
            :before-close="handleClose">
      <div class="el-dialog-div">
      <h3 style="margin-bottom: 5px;color: rgba(38,255,251,0.8)">生活污水</h3>
      <el-table
              :data="sewageList"
              border
              style="width: 100%">
        <el-table-column
                prop="shipNameCn"
                label="船名"
                min-width="20%">
        </el-table-column>
        <el-table-column
                prop="mmsi"
                label="MMSI"
                min-width="20%">
        </el-table-column>
        <el-table-column
                prop="time"
                label="接收时间"
                min-width="20%">
        </el-table-column>
        <el-table-column
                prop="num"
                label="数量"
                min-width="20%">
        </el-table-column>
        <el-table-column
                prop="modeOfOperationName"
                label="作业方式"
                min-width="20%">
        </el-table-column>
      </el-table>
          </div>
    </el-dialog>


    <el-dialog
            :visible.sync="dialogVisible2"
            width="50%"
            :before-close="handleClose"
            >
      <div class="el-dialog-div">
      <h3 style="margin-bottom: 5px; margin-top: 5px;color: rgba(38,255,251,0.8);font-size: 18px">船舶信息</h3>
      <el-row style="margin-bottom: 5px">
        <el-col :span="12"><div class="grid-content bg-purple-light">
         <span class="tab_let">船名</span>: <span class="tab_right">{{this.shipList.shipNameCn}}</span>
        </div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">
          <span class="tab_let">MMSi</span>: <span class="tab_right">{{this.shipList.mmsi}}</span>
        </div></el-col>
      </el-row>
      <el-row style="margin-bottom: 5px">
        <el-col :span="12"><div class="grid-content bg-purple-light">
          <span class="tab_let">船舶类型</span>: <span class="tab_right">{{this.shipList.shipType}}</span>
        </div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">
          <span class="tab_let">船长度</span>: <span class="tab_right">{{this.shipList.length}}</span>
        </div></el-col>
      </el-row>
      <el-row style="margin-bottom: 5px">
        <el-col :span="12"><div class="grid-content bg-purple-light">
          <span class="tab_let">船宽度</span>: <span class="tab_right">{{this.shipList.width}}</span>
        </div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">
          <span class="tab_let">水下深度</span>: <span class="tab_right">{{this.shipList.depth}}</span>
        </div></el-col>
      </el-row>
      <h3 style="margin-bottom: 5px;color: rgba(38,255,251,0.8);font-size: 18px">污染物排放数据</h3>
      <el-table
              :data="receiveList"
              border
              style="width: 100%">
        <el-table-column
                prop="shipNameCn"
                label="船名"
                min-width="16%">
        </el-table-column>
        <el-table-column
                prop="time"
                label="接收时间"
                min-width="22%">
        </el-table-column>
        <el-table-column
                prop="modeOfOperationName"
                label="作业方式"
                min-width="20%">
        </el-table-column>
        <el-table-column
                prop="sewageTypeName"
                label="类型"
                min-width="22%">
        </el-table-column>
        <el-table-column
                prop="num"
                label="数量"
                min-width="20%">
        </el-table-column>
      </el-table>
      </div >
    </el-dialog>


  </div>
</template>

<script>
  import centreLeft from "@/components/echart/centerLeft2/centreLeft";
  // import centreLeft1Chart from "@/components/echart/centerLeft2/centreLeft1Chart";
// import centreLeft2Chart from "@/components/echart/centerLeft2/centreLeft2Chart";
import centreRight2Chart1 from "@/components/echart/centreRight2/centreRight2Chart1";
import centreRight2Chart2 from "@/components/echart/centreRight2/centreRight2Chart2";
import centreRight2Chart3 from "@/components/echart/centreRight2/centreRight2Chart3"
  import Moment from 'moment'

export default {
  data() {
    return {
      Height:'370px',
      loading: true,
      newsList:[],
      shipList:{},
      receiveList:[],
      rubbishList:[],
      sewageList:[],
      sewageList1:[],
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      cbSum: 0,
      cbcount: 0,
      shSum: 0,
      shcount: 0,
      hycount:0,
      hySum:0,
      startTime:null,
      endTime:null,
      startPower:null,
      endPower:null,
      shipNameCn:null,
      powerSum:null,
      options: [{
        value: '',
        label: '果园港汇总'
      }, {
        value: '57ae6005-ca85-425b-bdfd-2246af23811d',
        label: '果园滚装码头'
      }, {
        value: 'ad4ba82f-aa63-4d3b-8969-e0d4be05cb3c',
        label: '果园件散货码头'
      }, {
        value: '1404a34c-045a-4d26-8135-8f7c8d839ef4',
        label: '果园集装箱码头'
      }],
      select1 : '',
      select2 : '',
      timer: null,//定时器
    };
  },
  components: {
    centreLeft,
    // centreLeft1Chart,
    // centreLeft2Chart,
    centreRight2Chart1,
    centreRight2Chart2,
    centreRight2Chart3
  },
  mounted() {
    this.cancelLoading();
    this.getData()
    this.getQueryReceiveCount()
    this.shws1()
    this.getQueryChargingRecord()


  },
  created() {
    //一分钟刷新一次这个方法
    this.timer = setInterval(() =>{
      //案电接口
      this.getQueryChargingRecord()
    },60000),
            this.timer = setInterval(() =>{
             // 查询船舶垃圾、生活污水接收艘次、接收总量接口
              this.getQueryReceiveCount()
            },60000),

            this.timer = setInterval(() =>{
              this.getData()
            },60000),

            this.timer = setInterval(() =>{
              // 查询船舶垃圾、生活污水接收艘次、接收总量接口
              this.getQueryReceiveCount()
            },60000),

            this.timer = setInterval(() =>{
              this.shws1()
            },60000)
  },
  // 可以判断如果定时器还在运行就关闭 或者直接关闭
  destroyed () {
    clearInterval(this.timer)
  },

  watch: { //监听器，监听下拉框的变化
    select1(val){
         this.select2 = val
      this.shws1()
      this.getQueryReceiveCount()
    },
    // startPower(val){
    //
    // }
  },
  methods: {
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    cblj(){ //船舶垃圾弹框
      this.dialogVisible =true
               this.axios.get('http://36.156.158.102:8085/cqdata/cqdata/queryPollutionList?sewageType=rubbish&companyId=' + this.select2).then((response)=>{
                for (let i = 0; i <response.data.data.data.length; i++) {
                  //数量和单位拼接
                  response.data.data.data[i].num = response.data.data.data[i].receiveNum + response.data.data.data[i].unit
                  //把时间格式化成YYYY-MM-DD HH:mm
                  response.data.data.data[i].time = Moment(response.data.data.data[i].createdTime).format('YYYY-MM-DD HH:mm')
                }
                this.rubbishList = response.data.data.data
              })
    },
    shws(){ //生活污水弹框
      this.dialogVisible1 =true
      this.axios.get('http://36.156.158.102:8085/cqdata/cqdata/queryPollutionList?sewageType=sewage&companyId=' + this.select2).then((response)=>{
        for (let i = 0; i <response.data.data.data.length; i++) {
          //数量和单位拼接
          response.data.data.data[i].num = response.data.data.data[i].receiveNum + response.data.data.data[i].unit
          //把时间格式化成YYYY-MM-DD HH:mm
          response.data.data.data[i].time = Moment(response.data.data.data[i].createdTime).format('YYYY-MM-DD HH:mm')
        }
        this.sewageList = response.data.data.data
      })
    },
    shws1(){ //含油污水表格
       this.axios.get('http://36.156.158.102:8085/cqdata/cqdata/queryPollutionList?sewageType=oilsewage&companyId=' + this.select2).then((response)=>{
        for (let i = 0; i <response.data.data.data.length; i++) {
          //数量和单位拼接
          response.data.data.data[i].num = response.data.data.data[i].receiveNum + response.data.data.data[i].unit
          //把时间格式化成YYYY-MM-DD HH:mm
          response.data.data.data[i].time = Moment(response.data.data.data[i].createdTime).format('YYYY-MM-DD HH:mm')
        }
        this.sewageList1 = response.data.data.data
      })
    },
    rowClick(e){ //table表格弹矿
      this.dialogVisible2 =true
      // console.log('e',e.mmsi)
       this.axios.get('http://36.156.158.102:8085/cqdata/cqdata/queryShipDataByMmsi?mmsi='+e.mmsi).then((response)=>{
               // this.axios.get('http://localhost:8133/cqdata/queryShipDataByMmsi?mmsi='+e.mmsi).then((response)=>{
        this.shipList = response.data.data.ship
        this.receiveList =response.data.data.receiveList
        // for (let i = 0; i <response.data.data.receiveList ; i++) {
        //   this.receiveList[i].style.marginBottom="20px"
        // }
        for (let i = 0; i <response.data.data.receiveList.length; i++) {
          //数量和单位拼接
          response.data.data.receiveList[i].num = response.data.data.receiveList[i].receiveNum + response.data.data.receiveList[i].unit
          //把时间格式化成YYYY-MM-DD HH:mm
          response.data.data.receiveList[i].time = Moment(response.data.data.receiveList[i].createdTime).format('YYYY-MM-DD HH:mm')
        }
          console.log('shipAndReceiveList',response.data.data.receiveList)
      })
    },
    //下拉框事件
    onSelected(e){
      // this.select2 = e
      console.log('select2',this.select2)
      //查询船舶垃圾、生活污水接收艘次、接收总量table列表
      this.axios.get('http://36.156.158.102:8085/cqdata/cqdata/queryReceive?limit=15&companyId='+e).then((response)=>{
        for (let i = 0; i <response.data.data.data.length; i++) {
          //数量和单位拼接
          response.data.data.data[i].num = response.data.data.data[i].receiveNum + response.data.data.data[i].unit
          //把时间格式化成YYYY-MM-DD HH:mm
          response.data.data.data[i].time = Moment(response.data.data.data[i].createdTime).format('YYYY-MM-DD HH:mm')
        }
        this.newsList = response.data.data.data;
      })
    },
    //页面加载完成时候调用显示默认下拉列表
    getData(){
      //查询船舶垃圾、生活污水接收艘次、接收总量table列表
      this.axios.get('http://36.156.158.102:8085/cqdata/cqdata/queryReceive?limit=15&companyId='+this.select1).then((response)=>{
        for (let i = 0; i <response.data.data.data.length; i++) {
          //数量和单位拼接
          response.data.data.data[i].num = response.data.data.data[i].receiveNum + response.data.data.data[i].unit
          //把时间格式化成YYYY-MM-DD HH:mm
          response.data.data.data[i].time = Moment(response.data.data.data[i].createdTime).format('YYYY-MM-DD HH:mm')
        }
        this.newsList = response.data.data.data;
      })
    },

    //查询船舶垃圾、生活污水接收艘次、接收总量
    getQueryReceiveCount(){
      this.axios.get('http://36.156.158.102:8085/cqdata/cqdata/queryReceiveCount?companyId=' + this.select2).then((response)=>{
        let data1=response.data.data;
        // console.log('data1',data1)
        this.cbSum = data1.cbSum
        this.cbcount = data1.cbcount
        this.shSum = data1.shSum
        this.shcount = data1.shcount
        this.hycount = data1.hycount
        this.hySum = data1.hySum
         // console.log('shcount',this.shSum)
      })
    },
    getQueryChargingRecord(){
      this.axios.get('http://36.156.158.102:8085/cqdata/cqdata/queryChargingRecord').then((response)=>{
        console.log('getQueryChargingRecord',response.data.data)
        this.startTime = response.data.data.startTime
        this.endTime = response.data.data.endTime
        this.startPower = response.data.data.startPower
        this.endPower = response.data.data.endPower
        this.shipNameCn = response.data.data.shipNameCn
        if (this.endPower>0){
          this.powerSum = this.endPower - this.startPower
        }

      })
    },
  }
};
</script>

<style lang="scss">

  #body1{
    margin: 0;
    padding: 5px 15px 5px 15px;
    background-color: rgba(5,6,23,0.9);
    background-size: cover;
    background-position: center center;
    /*overflow-y:auto; overflow-x:auto;*/
    width: 1890px;
    height: 1070px;
    /*全屏去除滚动条*/
    overflow-x:hidden;
    overflow-y:hidden;

  }

  header{
    display: flex;
    width: 1890px;
    height: 104px;
    margin-bottom: 20px;
    background-image: url("../assets/headtitle.png");
    background-size: 100% 100%;
  }
  header #header1 {
    width: 470px;
    height: 100%;
  }
  header #header1 span{
    margin-left: 30px;
    line-height: 60px;

    color: white;
  }
  header #header2 {
    width: 950px;
    height: 100%;
  }
  header #header2 h1{
    color: rgba(38, 255, 251, 0.8);
    text-align: center;
    padding-top: 10px;

  }
  header #header3 {
    width: 470px;
    height: 100%;
    margin-top: 10px;
  }

  #leftdiv{
    width: 616px;
    height: 946px;
    margin-right: 20px;
  }
  #centrediv{
    width: 616px;
    height: 946px;
    margin-right: 20px;
  }
  #rightdiv{
    width: 616px;
    height: 946px;
  }
  .no{
    box-shadow: inset 0 0 11px 2px #2f80bf, 0 0 11px 3px #2f80bf;
    width: 100%;
    height: 302px;

  }
  .centredivtop{
    width: 100%;
    height: 268px;
    margin-bottom: 20px;
    box-shadow: inset 0 0 11px 2px #2f80bf, 0 0 11px 3px #2f80bf;
  }
  #centre-div-bottom{
    width: 100%;
    height: 370px;
    overflow: hidden;
    box-shadow: inset 0 0 11px 2px #2f80bf, 0 0 11px 3px #2f80bf;
  }
  p{
    display: inline;
    margin-left: 5px;
    font-size: 20px;
    color: rgba(38, 255, 251, 0.8);
  }
  .bg-purple{
    color: rgba(38, 255, 251, 0.8);
    font-size: 20px;
    padding: 15px 0px 0px 30px;
  }
  .bg-purple1{
    color: white;
    font-size: 20px;
    padding: 15px 0px 0px 0px;
    text-decoration:underline;
  }
  .no-hd {
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
    &::before {
      content: "";
      position: absolute;
      width: 40px;
      height: 10px;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
      top: 0;
      left: 0;
    }
    &::after {
      content: "";
      position: absolute;
      width: 30px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
      right: 0;
      bottom: 0;
    }
    ul {
      list-style-type: none;
      display: flex;
      li {
        position: relative;
        flex: 1;
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 30px;
        color: rgba(38,255,251,0.8);
        padding: 4px 0;
        font-family: electronicFont;
        font-weight: bold;
        &:first-child::after {
          content: "";
          position: absolute;
          height: 50%;
          width: 1px;
          background: rgba(255, 255, 255, 0.2);
          right: 0;
          top: 25%;
        }
      }
    }
  }

  .no-bd ul {
    list-style-type: none;
    display: flex;
    li {
      flex: 1;
      height: 5px;
      line-height: 5px;
      text-align: center;
      font-size: 20px;
      color: rgba(38,255,251,0.8);
    }
  }

  .no1-hd {
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
    &::before {
      content: "";
      position: absolute;
      width: 30px;
      height: 10px;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
      top: 0;
      left: 0;
    }
    &::after {
      content: "";
      position: absolute;
      width: 30px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
      right: 0;
      bottom: 0;
    }
    ul {
      list-style-type: none;
      display: flex;
      li {
        position: relative;
        flex: 1;
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 30px;
        color: rgba(38,255,251,0.8);
        padding: 4px 0;
        font-family: electronicFont;
        font-weight: bold;
        &:first-child::after {
          content: "";
          position: absolute;
          height: 50%;
          width: 1px;
          background: rgba(255, 255, 255, 0.2);
          right: 0;
          top: 25%;
        }
      }
    }
  }

  .no1-bd ul {
    list-style-type: none;
    display: flex;
    li {
      flex: 1;
      height: 5px;
      line-height: 5px;
      text-align: center;
      font-size: 20px;
      color: rgba(38,255,251,0.8);
    }
  }

/*==============================================================*/
/*element -ui 样式*/
.el-table, .el-table__expanded-cell {
  background-color: transparent;

}
.el-table tr {
  background-color: transparent!important;
}
.el-table th {
  background-color: transparent!important;
}
.el-table--enable-row-transition .el-table__body td, .el-table .cell{
  background-color: transparent;
}
.el-table__row>td{
  border: none;
}
.el-table td>.cell {
  color: white;
  font-size: 20px;
}
/*表头字体的样式*/
.el-table th>.cell {
  font-size: 20px;
  color: rgba(38,255,251,0.8);
}

/*鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(73,173,205,0.5);
}

.el-table::before {
  /* 清除底部横线 */
  height: 0px;
}

// 表格最外左边
.el-table--border, .el-table--group{
  border: none;

}
.el-table--border, .el-table--group{
  border: none;

}
.el-table th.is-leaf{
  /* 去除上边框 */
  border: none;
 border-bottom:1px solid rgba(38,255,251,0.8)

}

// 表格最外层边框-右边
.el-table--border::after, .el-table--group::after{
  width: 0;
}

.el-dialog{
  background-color: rgba(5,6,23,0.9);
  box-shadow: inset 0 0 11px 2px #2f80bf, 0 0 11px 3px #2f80bf;

}
/*element-ui弹框*/

.el-dialog__body{
  color: white;
  padding: 5px 5px;
  /*font-size: xx-small;*/
}
.el-dialog__title{
  color: white;
}
.el-dialog__header{
 padding: 0px;
}
  .tab_right{
    font-size: 18px;
    text-decoration:underline;
    margin-left: 5px;

  }
  .tab_let{
    font-size: 18px;

  }
.el-input--medium{
  background: transparent;
}
.el-dialog-div{
  height:450px ;
  overflow: auto;
}
  .tab_top{
    color: rgba(38,255,251,0.8);
  }


/*  element下拉矿样式*/
  .el-input__inner{
    background-color: rgba(5,6,23,0.9);
    box-shadow: inset 0 0 11px 2px #2f80bf, 0 0 11px 3px #2f80bf;
    color: rgba(38,255,251,0.8);
    font-size: 16px;
  }
  .el-select-dropdown{
    background-color: rgba(5,6,23,0.9);
    box-shadow: inset 0 0 11px 2px #2f80bf, 0 0 11px 3px #2f80bf;

  }
  .el-select-dropdown__item.hover{
    background-color: rgba(73,173,205,0.5);
  }
  .el-select-dropdown__item{
    font-size: 16px;
    color: #d3d6dd;
  }




</style>
